<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON-Static-Database</title>
</head>
<body>
    <div id="root">
        <h2>418 - I'm a teapot</h2>
        <p class="teapot">I have no idea 'cause i'm a teapot.</p>
        <p class="realmsg">This page has no message. But other data will be found by other ways.</p>
    </div>
</body>
<script>
const data = {
    teapot: document.getElementsByClassName("teapot")[0],
    realMsg: document.getElementsByClassName("realmsg")[0]
}
setTimeout(()=>{
    data.teapot.style.display = "none";
    data.realMsg.style.display = "inline";
}, 10000)
</script>
<style>
* {
    margin: 0; padding: 0;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body {
    background-color: #141414;
    height: 100vh;
    width: 100vw;
}
#root {
    color: #fff;
    display: inline-block;
    position: relative;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.realmsg {
    display: none;
}
</style>
</html>